<template>
  <f7-page>
    <f7-navbar :title="$t('m.s1')" back-link=" "></f7-navbar>

    <div class="content-padding">
      <f7-list>
        <f7-list-item :title="$t('m.s2')" link="/update-password/"></f7-list-item>
        <f7-list-item :title="$t('m.s3')" :after="`${$store.getters.cacheData}MB`" link @click="handleClearCache"></f7-list-item>
        <f7-list-item :title="$t('m.s4')" link="/about-us/"></f7-list-item>
        <f7-list-item :title="$t('m.s5')" link @click="$store.commit('toggleLangActions', true)"></f7-list-item>
        <f7-list-item :title="$t('m.s6')" after="1.4.1" link @click="checkUpdate"></f7-list-item>
      </f7-list>

      <f7-button fill color="blue" large @click="LogOut">{{$t('m.s7')}}</f7-button>
    </div>


  </f7-page>
</template>

<script>
  export default {
    name: "setting",
    data() {
      return {
        languageActions: false
      }
    },
    methods: {
      LogOut() {
        this.$dialog.confirm({
          message: this.$t('m.s9'),
          confirmButtonColor: '#f95353'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            setTimeout(() => {
              this.$f7router.back();
            }, 500)
          })
        }).catch(() => {

        })
      },
      handleClearCache() {
        this.$toast.loading({
          message: this.$t('m.s10'),
          forbidClick: true,
          duration: 0
        })
        setTimeout(() => {
          this.$toast.clear();
          this.$toast(this.$t('m.s11'));
          this.$store.commit('setCache', 0)
        }, 3000)
      },
      checkUpdate() {
        this.$toast.loading({
          message: this.$t('m.s12'),
          forbidClick: true,
          duration: 0
        })
        setTimeout(() => {
          this.$toast.clear();
          this.$toast(this.$t('m.s13'));
        }, 2000)
      },
      toggleLanguage(lang) {
        console.log(this.$i18n);
        this.$i18n.locale = lang;
        this.$store.dispatch('setLanguage', lang);
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding;
    .button {
      margin-top: 200px;
    }
  }
</style>
